<template>
  <view class="app">
    <z-paging-swiper>
      <template #top>
        <view class="header">
          <!-- 搜索 -->
          <view class="search-box">
            <input
              type="text"
              confirm-type="search"
              v-model.trim="searchKey"
              @confirm="search()"
              class="font-size-26rpx flex-1"
              placeholder="请输入手机号或昵称搜索"
            />
            <view class="pl-25rpx" @click="search()">
              <u-icon size="26" color="#b7b7b7" name="search"></u-icon>
            </view>
          </view>

          <!-- 导航 -->
          <z-tabs
            ref="tabRef"
            :list="navList"
            :current="current"
            :active-style="{ fontSize: '30rpx', fontWeight: '800' }"
            :inactive-style="{ fontSize: '30rpx' }"
            name-key="label"
            value-key="value"
            :scroll-count="2"
            :bar-width="40"
            :bar-height="7"
            :bottom-space="0"
            :active-color="config.theme.color"
            :tabs-style="{ padding: '0 16rpx', height: '80rpx' }"
            bg-color="#fff"
            @change="changeTab"
          ></z-tabs>
        </view>
      </template>

      <swiper
        class="h-full"
        :current="current"
        easing-function="linear"
        @transition="swiperTransition"
        @animationfinish="swiperAnimationfinish"
      >
        <swiper-item class="overflow-auto" v-for="(nav, idx) in navList" :key="idx">
          <team-list :layer="nav.value" :idx="idx" @changeTotal="onChangeTotal"></team-list>
        </swiper-item>
      </swiper>
    </z-paging-swiper>
  </view>
</template>

<script lang="ts" setup>
  import TeamList from './team_list.vue';
  import emitter from '@/utils/mitt';
  import { ref, watch } from 'vue';
  import { config } from '@/config/env';

  const searchKey = ref<string>('');
  const current = ref<number>(0);
  const tabRef = ref();

  const navLabels = ['一级', '二级'];
  const navList = ref([
    { label: `${navLabels[0]} (0人)`, value: 1 },
    { label: `${navLabels[1]} (0人)`, value: 2 },
  ]);
  const searchKeys = [
    { key: '', temp: '' },
    { key: '', temp: '' },
  ];

  const search = () => {
    if (searchKey.value == searchKeys[current.value].temp) return;
    searchKeys[current.value].temp = searchKey.value;
    searchKeys[current.value].key = searchKey.value;
    emitter.emit('searchMember', [current.value, searchKey.value]);
  };

  const changeTab = (index: number) => {
    current.value = index;
  };

  const swiperTransition = (e: any) => {
    tabRef.value.setDx(e.detail.dx);
  };

  // swiper滑动结束
  const swiperAnimationfinish = (e: any) => {
    current.value = e.detail.current;
    tabRef.value.unlockDx();
  };

  const onChangeTotal = (idx: number, total: number) => {
    navList.value[idx].label = `${navLabels[idx]} (${total}人)`;
  };

  watch(
    () => current.value,
    () => {
      searchKey.value = searchKeys[current.value].key;
    }
  );
</script>

<style lang="scss" scoped>
  .header {
    background: white;
    box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 10px;
    z-index: 1;

    .search-box {
      display: flex;
      justify-content: center;
      background: #f5f5f5;
      margin: 10rpx 30rpx 30rpx;
      padding: 12rpx 30rpx;
      border-radius: 100rpx;

      .search-input {
        font-size: 26rpx;
        color: #9f9f9f;
      }
    }
  }
</style>
